<!-- 抽屉样式组件 -->
<script lang="ts" setup>
import { CloseOutlined, SettingOutlined } from '@vicons/antd'
import CheckboxLayout from '~/layouts/setting-drawer/checkbox-layout.vue'
import Container from '~/layouts/setting-drawer/container.vue'
import CheckboxTheme from '~/layouts/setting-drawer/checkbox-theme.vue'
import type { LayoutType } from '~/config/layout-theme.ts'
import type { ThemeType } from '~/config/theme.ts'

const props = withDefaults(
  defineProps<{
    floatTop?: number | string
    drawerWidth?: number | string
    layout?: 'mix' | 'side' | 'top'
    layoutStyle?: 'inverted' | 'light' | 'dark'
    layoutList?: LayoutType[]
    layoutStyleList?: LayoutType[]
    themeList?: ThemeType[]
    theme?: string
  }>(),
  {
    floatTop: 240,
    drawerWidth: 400,
  },
)

const emit = defineEmits([
  'update:layout',
  'update:layoutStyle',
  'update:theme',
])

const show = ref(false)

function handleClick(val: boolean) {
  show.value = val
}

const cssVar = computed(() => {
  return {
    '--pro-admin-float-top': `${props.floatTop}px`,
    '--pro-admin-drawer-width': `${props.drawerWidth}px`,
  }
})

function onChangeTheme(val: string) {
  emit('update:theme', val)
}
</script>

<template>
  <Teleport to="body">
    <div :style="cssVar" class="fixed top-[var(--pro-admin-float-top)] right-0">
      <!--  -->
      <n-button
        class="b-rd-tr-0! b-rd-br-0!"
        size="large"
        type="primary"
        @click="handleClick(true)"
      >
        <template #icon>
          <n-icon size="24">
            <SettingOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </Teleport>

  <n-drawer v-model:show="show" :width="drawerWidth">
    <n-drawer-content>
      <Container
        v-if="layoutStyleList"
        :title="$t('global.layout.setting.drawer.style')"
      >
        <n-space size="large">
          <template v-for="item in layoutStyleList" :key="item.id">
            <CheckboxLayout
              :checked="item.id === layoutStyle"
              :dark="item.dark"
              :inverted="item.inverted"
              :layout="item.key as any"
              :title="$t(item.title)"
              @click="() => $emit('update:layoutStyle', item.id)"
            />
          </template>
        </n-space>
      </Container>

      <Container
        v-if="themeList"
        :title="$t('global.layout.setting.drawer.theme')"
      >
        <n-space>
          <CheckboxTheme
            v-for="item in themeList"
            :key="item.key"
            :checked="item.key === theme"
            :color="item.color"
            :title="$t((item as any).title)"
            @click="onChangeTheme(item.key)"
          />
        </n-space>
      </Container>

      <n-divider />

      <Container
        v-if="layoutList"
        :title="$t('global.layout.setting.drawer.layout')"
      >
        <n-space size="large">
          <template v-for="item in layoutList" :key="item.key">
            <CheckboxLayout
              :checked="item.key === layout"
              :layout="item.key as any"
              :title="$t(item.title)"
              @click="() => $emit('update:layout', item.key)"
            />
          </template>
        </n-space>
      </Container>
    </n-drawer-content>
    <div
      :style="cssVar"
      class="absolute top-[var(--pro-admin-float-top)] right-[var(--pro-admin-drawer-width)]"
    >
      <!--  -->
      <n-button
        class="b-rd-tr-0! b-rd-br-0!"
        size="large"
        type="primary"
        @click="handleClick(false)"
      >
        <template #icon>
          <n-icon size="24">
            <CloseOutlined />
          </n-icon>
        </template>
      </n-button>
    </div>
  </n-drawer>
</template>

<style scoped></style>
